<template>
  <div>
    <loan-approve
      :query-id="queryId"
      @get-data="handleGetData"
      :view-mode="true"
      ref="approve"
      @dismiss="handleDismiss"
    >
      <template v-for="p in busProcess">
        <tr :key="p.type">
          <td>
            <span>{{ p.signLabel }}意见</span>
          </td>
          <template v-if="!p.editable || viewMode">
            <td colspan="3">
              <div class="text-left">{{ approval[p.keys.comment] }}&nbsp;</div>
              <sign-panel
                :approval="approval"
                :sign-name="p.signName"
                :sign-date="p.keys.date"
              ></sign-panel>
            </td>
          </template>
          <template v-else>
            <td colspan="3" class="input-td">
              <el-input
                v-model="approval[p.keys.comment]"
                type="textarea"
                placeholder="请填写"
              ></el-input>
              <div class="row px-3 py-2">
                <div class="col text-left text-muted">签字：{{ editName }}</div>
                <div class="col text-left text-muted">日期：{{ editDate }}</div>
              </div>
            </td>
          </template>
        </tr>
      </template>
    </loan-approve>
    <div class="text-center" v-if="editable">
      <el-button
        type="primary"
        class="btn-long"
        :loading="saveLoading"
        @click="handleSuccessConfirm"
      >
        提交
      </el-button>
      <el-button class="btn-long" :loading="saveLoading" @click="handleDismiss">取消</el-button>
    </div>
  </div>
</template>

<script>
import LoanApprove from '@/credit/views/county/unionProvince/components/loanApprove/Base'
import {
  getProcess,
  getApproval,
  approvalComment,
} from '@/credit/views/county/unionProvince/components/loanApprove/index'
import { validateProcess } from '@/credit/views/county/unionProvince/components/contractApprove/index'
import { mapGetters } from 'vuex'
import SignPanel from '@/credit/views/county/unionProvince/components/loanApprove/SignPanel'
export default {
  components: {
    LoanApprove,
    SignPanel,
  },
  props: {
    queryId: {
      type: String,
      required: true,
    },
    viewMode: Boolean,
  },
  data() {
    return {
      related: {},
      approval: {},
      authPerson: {},
      solidApproval: {},
      riskManager: {},
      busProcess: [],
      saveLoading: false,
    }
  },

  computed: {
    ...mapGetters(['user']),
    editName() {
      return this.user.realName
    },
    editDate() {
      return this.$utils.dateFormat(new Date(), 'yyyy年MM月dd日')
    },
    editable() {
      return this.busProcess.some(it => it.editable)
    },
    approvalId() {
      return this.approval.loan_approval_id
    },
  },

  created() {},
  methods: {
    handleSuccessConfirm() {
      if (!this.approvalId) {
        return this.$message.error('获取审批信息失败，不能提交,请刷新后重试！')
      }
      const editProcess = this.busProcess.filter(it => it.editable)
      const errMsg = validateProcess(this.approval, editProcess)
      if (errMsg) {
        return this.$message.error(errMsg)
      }
      if (!this.$refs.approve.validateContract()) {
        return
      }
      const editData = this.$refs.approve.getEditData()

      this.$utils
        .msgbox({
          message: '是否提交？',
          type: 'warning',
          beforeClose: () => this.updateApproval(editProcess, editData),
        })
        .then(res => {
          this.$message.success('提交成功')
          this.$emit('success', res)
          this.refreshApproval()
        })
        .catch(err => {
          this.$message.error(`提交失败，请重试！`)
          throw new Error(err)
        })
    },
    updateApproval(bps, editData) {
      return approvalComment(this.approvalId, bps, {
        name: this.editName,
        status: 1,
        approval: this.approval,
        solidApproval: this.solidApproval,
        otherData: editData,
        queryId: this.queryId,
      })
    },
    refreshApproval() {
      return getApproval(this.queryId).then(approval => {
        this.approval = approval || {}
        this.solidApproval = { ...this.approval }
        this.doProcess()
      })
    },
    handleGetData({ related, approval, authPerson, riskManager }) {
      this.related = related || {}
      this.approval = approval || {}
      this.solidApproval = { ...this.approval }
      this.authPerson = authPerson || {}
      this.riskManager = riskManager
      this.doProcess()
    },
    handleDismiss() {
      this.$emit('dismiss', true)
    },
    doProcess() {
      const { approval, related, authPerson, riskManager } = this
      const needData = {
        approval,
        related,
        authPerson,
        riskManager,
      }
      this.busProcess = getProcess(needData)
    },
  },
}
</script>
<style lang="scss" scoped></style>
